import platform = require('../common/baseCommon');
import appClient = require('./appClient');
import { debug } from 'util';

export const moduleName = "platform.client";

// /**
//  * 按钮
//  */
// @platform.addon("按钮", "按钮控制器", moduleName)
// @appClient.template('<button type="button">清除</button>')
// export class button extends appClient.baseControl {
//     /**
//      * 内部html
//      */
//     innerHtml?: string;
//     /**
//      * 点击事件
//      */
//     onClick() { };


//     onAfterBind?() {
//         if (this.placeHolder) {
//             $(this.element).attr("placeholder", this.placeHolder);
//         }
//         if (this.type) {
//             $(this.element).attr("type", this.type);
//         }
//         if (this.ariaLabel) {
//             $(this.element).attr("aria-label", this.ariaLabel);
//         }
//         if (this.ariaDescribedBy) {
//             $(this.element).attr("aria-describedby", this.ariaDescribedBy);
//         }
//         if (this.styleClass) {
//             this.addClass(this.styleClass);
//         }
//     }
// }

// /**
//  * 输入框
//  */
// @platform.addon("输入框", "输入框控制器", moduleName)
// @appClient.template('<input type="text"/>')
// export class input extends appClient.baseControl {
//     /**
//      * 类型
//      */
//     type?: string = "text";
//     /**
//      * 占位文字
//      */
//     placeHolder?: string;
//     /**
//      * 
//      */
//     ariaDescribedBy?: string;
//     /**
//      * 
//      */
//     ariaLabel?: string;
//     /**
//      * 风格类型
//      */
//     styleClass?: string;

//     onAfterBind?() {
//         if (this.placeHolder) {
//             $(this.element).attr("placeholder", this.placeHolder);
//         }
//         if (this.ariaLabel) {
//             $(this.element).attr("aria-label", this.ariaLabel);
//         }
//         if (this.ariaDescribedBy) {
//             $(this.element).attr("aria-describedby", this.ariaDescribedBy);
//         }
//         if (this.styleClass) {
//             this.addClass(this.styleClass);
//         }
//     }

//     setValue?(value: any) {
//         $(this.element).val(value);
//     }

//     getValue?(): any {
//         return $(this.element).val();
//     }
// }

// /**
//  * 复选框
//  */
// @platform.addon("输入框", "复选框控制器", moduleName)
// @appClient.template(
//     `<div>
//         <input name="checkBox" type="checkbox">
//         <label name="caption"></label>
//     </div>`)
// export class checkbox extends appClient.baseControl {
//     $caption?: JQuery = undefined;
//     $checkBox?: JQuery = undefined;
//     caption?: string;
//     /**
//      * 风格类型
//      */
//     styleClass?: string;

//     onAfterBind?() {
//         $(this.$caption).text(this.caption);
//     }

//     setValue?(value: any) {
//         $(this.element).find(`input[type="checkbox"]`).attr("checked", true);
//     }

//     getValue?(): any {
//         let check = $(this.element).find(`input[type="checkbox"]`)[0]["checked"];
//         return check ? Number(check) : undefined;
//     }
// }

// /**
//  * 单选框
//  */
// @platform.addon("输入框", "单选框控制器", moduleName)
// @appClient.template(`<input type="radio" ><label name="caption"></label>`)
// export class radio extends appClient.baseControl {
//     /**
//      * 标题控件
//      */
//     $caption?: JQuery = undefined;
//     /**
//      * 标题
//      */
//     caption?: string;
//     /**
//      * 风格类型
//      */
//     styleClass?: string;
//     /**
//      * 返回值
//      */
//     returnValue?: any;
//     /**
//      * radio Name 属性值
//      */
//     radioName?: string = 'optionsRadios';
//     /**
//      * 获取选择状态
//      */
//     getisSelected(): boolean {
//         return $(this.element).find(`input[type="radio"]`)[0]["checked"];
//     }
//     onAfterBind?() {
//         this.$caption.text(this.caption);
//         //增加name 属性
//         $(this.element).find(`input[type="radio"]`).attr('name', this.radioName);
//     }
//     /**
//      * 获取点击值
//      */
//     getValue?(): any {
//         return this.returnValue;
//     }
// }

/**
 * 标题面板
 */
@platform.addon("标题面板", "有标题有子控件的面板", moduleName)
@appClient.template('<div class="panel">\
        <div class="panel-title" name="title"></div>\
        <div class="panel-client" name="client"></div>\
    </div>', 'platform/client/client.css')
export class titlePanel extends appClient.baseControl {
    /**
     * 标题控件
     */
    $title?: JQuery = undefined;
    /**
     * 客户端控件
     */
    $client?: JQuery = undefined;
    /**
     * 子控件
     */
    child?: appClient.baseControl;
    /**
     * 标题文字
     */
    title?: string;

    onAfterBind?() {
        // 标题
        if (this.title) {
            this.$title.html(this.title);
            this.$title.show();
        } else {
            this.$title.hide();
        }
        if (this.child) {
            this.child.setTo(this.$client);
        }
    }
}

/**
 * 布局控件
 */
@platform.addon("布局控件", "可以对父控件的子控件按顺序进行布局的面板", moduleName)
@appClient.template('<div></div>')
export class layoutPanel extends appClient.baseControl {
    /** 子控件，第0个是主试图，以后的是辅助视图 */
    children?: appClient.baseControl[string];
    /** 子控件容器 */
    childContainers?: JQuery = undefined;

    onAfterBind?() {
        this.childContainers = $(this.element).find('div[class="children"]');
        let childrenContainerLength = this.childContainers ? this.childContainers.length : 0;
        if (childrenContainerLength > 0) {
            let index = 0;
            for (let childName in this.children) {
                if (this.children[childName] instanceof Function) continue;
                if (index < childrenContainerLength) {
                    this.children[childName].appendTo(this.childContainers[index]);
                    index += 1;
                }
            }
        }
    }

    addChild(name: any, child: appClient.baseControl) {
        if (!this.children)
            this.children = [];
        this.children[String(name)] = child;
    }
}

/**
 * 导航页面
 */
@platform.addon("导航页面", "导航条中每个导航页面的定义", moduleName)
@appClient.template('<li> \
    <a name="link"> \
        <span name="icon"></span> \
        <span name="title"></span> \
    </a> \
</li>')
export class tabPage extends appClient.baseControl implements appClient.iTabPage {
    $link?: JQuery = undefined;
    $icon?: JQuery = undefined;
    $title?: JQuery = undefined;

    /**
     * 标题
     */
    title: string;
    /**
     * 图标
     */
    icon?: string;
    /**
     * 图标样式
     */
    iconClass?: string;
    /**
     * 视图
     */
    view?: appClient.baseControl | platform.factory;

    onChangeView?= (page: tabPage): void => { };

    onAfterBind?() {
        this.$title.html(this.title);
        this.$icon.addClass(this.iconClass);
        this.$link.click(() => {
            if (this.onChangeView) {
                this.onChangeView(this);
            }
        });
    }
}

@platform.addon("下拉菜单式导航页面", "导航条中每个下拉菜单式导航页面的定义", moduleName)
@appClient.template(`<li class="dropdown" name="dropdownTabPageButton">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
    <span name="icon"></span>
    <span name="title"></span>
<strong class="caret"></strong>
</a>
<ul class="dropdown-menu" name="dropdownTabPageMenu">
<!-- 下拉菜单 -->
</ul>
</li>`)
export class dropdownTabPage extends tabPage {

    /**
     * 下拉的导航信息
     */
    navPages?: tabPage[];

    /**
     * 下拉导航页面菜单
     */
    $dropdownTabPageMenu?: JQuery = undefined;

    /**
     * 下拉导航页面菜单按钮
     */
    $dropdownTabPageButton?: JQuery = undefined;

    /**
     * 绑定后事件
     */
    onAfterBind?() {
        this.$title.html(this.title);
        this.$icon.addClass(this.iconClass);
        let that = this;
        // 渲染导航页面
        if (this.navPages) {
            for (let nav of this.navPages) {
                nav.onChangeView = (page: tabPage) => {
                    if (that.onChangeView) {
                        that.onChangeView(page);
                    }
                };
                nav.appendTo(this.$dropdownTabPageMenu);
            }
        }
        //取消菜单选中效果
        this.$dropdownTabPageButton.on("hidden.bs.dropdown", () => {
            that.$dropdownTabPageMenu.find('li').removeClass('active');
            that.$dropdownTabPageButton.removeClass('active');
        });
    }
}

/**
 * 标签页
 */
@platform.addon("标签页", "标签页中每个标签的定义", moduleName)
@appClient.template(`<li>
    <a name="link" data-toggle="tab">
        <span name="icon"></span>
        <span name="title"></span>
        <button name="closeButton" type="button" class="close" aria-hidden="true" style="margin-left: 10px;">×</button>
    </a>
</li>`)
export class tabPanePage extends tabPage {
    /**关闭按钮 */
    $closeButton?: JQuery = undefined;

    /**关闭按钮点击事件 */
    onClickCloseButton?= (page: tabPanePage): void => { };

    onChangeView?= (page: tabPanePage): void => { };

    onAfterBind?() {
        this.$title.html(this.title);
        this.$icon.addClass(this.iconClass);
        this.$link.attr("href", "#" + this.id);
        this.$link.attr("name", this.id);
        this.$link.click(() => {
            if (this.onChangeView) {
                this.onChangeView(this);
            }
        });
        this.$closeButton.click(() => {
            //移除控件前解绑事件
            this.$link.unbind();
            if (this.onClickCloseButton) {
                this.onClickCloseButton(this);
            }
            //移除控件前解绑事件
            this.$closeButton.unbind();
            $(this.element).unbind();
            //从界面上一次当前控件
            $(this.element).remove();
        });
    }

    toTabPage?(): tabPage {
        let tab: tabPage = new tabPage();
        tab.title = this.title;
        tab.icon = this.icon;

        return undefined;
    }
}

/**
 * 标签页内容控件
 */
@platform.addon("标签页内容控件", "用于包含标签页中每个页面", moduleName)
@appClient.template(`<div class="tab-pane fade" name="tab_pane_fade"><div class="container-fluid" name="control"></div></div>`)
export class tabPaneControl extends appClient.baseControl {
    $control?: JQuery = undefined;

    /**
     * 子控件
     */
    childControl: appClient.baseControl;

    onAfterBind?() {
        this.attr("id", this.id);
        $(this.element).addClass("active");
        if (this.childControl) {
            this.childControl.appendTo($(this.$control));
            if (this.childControl.onShowed) {
                this.childControl.onShowed();
            }
        }
    }

    addChild(name: any, child: appClient.baseControl) {
        this.childControl = child;
    }
}

/**
 * 切换面板
 */
@platform.addon("切换面板", "可跳转切换的面板", moduleName)
@appClient.template('<div class="tabbable tabs-left">\
        <ul id="nav" class="nav nav-pills nav-justified" name="navBar"></ul>\
        <div name="client"></div>\
    </div>')
export class tabControl extends appClient.baseControl {
    /**
     * 导航条
     */
    $navBar?: JQuery = undefined;
    /**
     * 客户端控件
     */
    $client?: JQuery = undefined;
    /**
     * 导航信息
     */
    navPages?: tabPage[];
    /**
    * 视图栈
    */
    viewStack?: appClient.viewStack;

    /**
     * 更改页面
     * @param page 页面
     */
    changePage?(page: tabPage) {
        let view: appClient.baseControl = platform.getObject(page.view);
        $(this.$content).children().hide();
        if (view.element) {
            $(view.element).show();
        } else {
            view.appendTo(this.$content);
        }
    }

    /**
     * 绑定事件
     */
    onAfterBind?() {
        // 渲染导航页面
        if (this.navPages) {
            for (let nav of this.navPages) {
                nav.onChangeView = (page: tabPage) => {
                    this.changePage(page);
                };
                nav.appendTo(this.$navBar);
            }
        }

        // 加载首页
        if (this.navPages && this.navPages[0]) {
            this.changePage(this.navPages[0]);
        }
    }
}

/**
 * 基础编辑控件基类
 */
@platform.addon("基础编辑控件基类", "基础编辑控件基类", moduleName)
export class baseEditControl extends appClient.baseControl {
    /** 标题 */
    caption?: string;
    /** 控件 */
    protected control?: JQuery = undefined;
    /** 显示字段 */
    showField?: string;
    /** 隐藏值字段 */
    valueField?: string;
    /**
     * 获取输入的值
     */
    getValue?(): any {

    }
    /**
     * 设置输入框的值
     * @param value 值
     */
    setValue?(value: any) {

    }
    /**
     * 设置数据
     * @param data 数据
     */
    setData?(data: any) {

    }
}


/**
 * 字段编辑框
 */
@platform.addon("字段编辑框", "用于各种命名字段的编辑框", moduleName)
@appClient.template('<div class="input-group"></div>')
export class fieldEditControl extends baseEditControl {
    /**
     * 标签HTML
     */
    static readonly html_label = '<span class="input-group-addon">{0}</span>';
    static readonly html_clear = '<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>';
    static readonly html_input = `<input type="text"/>`;
    /** 前置标签 */
    frontLabel?: string;
    /** 后置标签 */
    backLabel?: string;
    /** 提示 */
    placeHolder?: string;
    /** 是否智能补全 */
    typeahead?: boolean = false;
    /** 绑定后事件 */
    onAfterBind?() {
        // 前标签
        if (this.frontLabel) {
            appClient.appendTo(this.element, platform.format(fieldEditControl.html_label, this.frontLabel));
        }
        this.control = $(fieldEditControl.html_input);
        this.control.appendTo(this.element);
        this.control.addClass("form-control");
        if (this.placeHolder) {
            this.control.attr('placeHolder', this.placeHolder);
        }
        // 后标签
        if (this.backLabel) {
            appClient.appendTo(this.element, platform.format(fieldEditControl.html_label, this.backLabel));
        }
        // 添加清除按钮
        let clear = appClient.appendTo(this.element, fieldEditControl.html_clear);
        $(clear.element).click(() => {
            this.onClearButtonClick();
        });
    }
    /**
     * 点击清除按钮事件
     */
    onClearButtonClick?() {
        this.control.val(null);
    }
    /**
     * 获取输入的值
     */
    getValue?(): any {
        return this.control.val();
    }
    /**
     * 设置数据
     * @param data 数据
     */
    setData?(data: any) {
        // 绑定输入控件
        if (this.typeahead && data) {
            this.control.attr("data-provide", "typeahead");
            let list = this.showField ? data.map((item: any) => {
                // 数据库字段不区分字段名获取值
                return platform.getJsonValueByKey(item, this.showField);
            }) : data;
            this.control.typeahead({
                source: function (query: any, process: any) {
                    process(list);
                }
            });
        }
    }
}

/**
 * 单复选框框
 */
@platform.addon("单复选框", "用于各种命名字段的编辑框", moduleName)
@appClient.template('<div class="input-group"></div>')
export class checkEditControl extends baseEditControl {
    /** HTML:复选框 */
    static readonly html_check = `<input type="checkbox" />`;
    /** HTML:标签 */
    static readonly html_label = `<label></label>`;
    /** 选中植 */
    checkValue?: string = "true";
    /**
     * 绑定后事件
     */
    onAfterBind?() {
        // 复选框控件
        this.control = $(checkEditControl.html_check);
        this.control.appendTo(this.element);
        // 标签
        if (this.caption) {
            appClient.appendTo(this.element, platform.format(checkEditControl.html_label, this.caption));
        }
        this.control.addClass("form-control");
    }
    /**
     * 获取输入的值
     */
    getValue?(): any {
        if (this.control.attr("checked")) {
            return this.checkValue;
        }
        else {
            return undefined;
        }
    }
}

/**
 * 单选框
 */
@platform.addon("单选框", "用单选的外框框", moduleName)
@appClient.template(`<div class="input-group">
<span class="input-group-addon" name="title"></span>
<div class="form-control" name="radios"></div>
</div>`)
export class radioEditControl extends baseEditControl {
    /** HTML:单选框 */
    static readonly html_radio = `<input type="radio" name={0} value={1}><label name="caption">{2}</label>&nbsp;`;
    /** 标题容器 */
    $title?: JQuery = undefined;
    /** 选项容器 */
    $radios?: JQuery = undefined;
    /** 单选框组名 */
    groupName?: string;
    /**
     * 绑定后事件
     */
    onAfterBind?() {
        if (this.caption) {
            this.$title.text(this.caption);
        }
    }
    getValue?(): any {
        let value = $(`input[name=${this.groupName}]:checked`).val();
        return value;
    }
    setData?(data: any) {
        if (this.showField && this.valueField && this.groupName) {
            for (let index = 0, len = data.length;
                index < len; index++) {
                let d = data[index];
                let option = $(platform.format(radioEditControl.html_radio,
                    this.groupName,
                    platform.getJsonValueByKey(d, this.valueField),
                    platform.getJsonValueByKey(d, this.showField)));
                option.appendTo(this.$radios);
            }
        }
    }
}

/**
 * 下拉框编辑控件
 */
@platform.addon("下拉框编辑控件", "下拉框编辑控件", moduleName)
@appClient.template(`<div class="input-group">
<span class="input-group-addon" name="caption"></span>
<select class="form-control" name="select"></select>
</div>`)
export class selectEditControl extends baseEditControl {
    /** HTML:下拉选项 */
    static readonly html_option = `<option value={0}>{1}</option>`;
    /** 标签容器 */
    $caption?: JQuery = undefined;
    /** 下拉框容器 */
    $select?: JQuery = undefined;
    onAfterBind?() {
        if (this.caption) {
            this.$caption.text(this.caption);
        }
        let optionHtml = platform.format(selectEditControl.html_option, "-1", "请选择");
        let option = $(optionHtml);
        option.appendTo(this.$select);
    }
    /**
     * 获取输入的值
     */
    getValue?(): any {
        // -1未选择值
        let value = this.$select.find('option:selected').val();
        return value == "-1" ? undefined : value;
    }
    /**
     * 设置输入框的值
     * @param value 值
     */
    setValue?(value: any) {

    }
    /** 设置编辑控件数据 */
    setData(data: any) {
        if (this.showField && this.valueField) {
            for (let index = 0, len = data.length;
                index < len; index++) {
                let d = data[index];
                let option = $(platform.format(selectEditControl.html_option,
                    platform.getJsonValueByKey(d, this.valueField),
                    platform.getJsonValueByKey(d, this.showField)));
                option.appendTo(this.$select);
            }
        }
    }
}

/**
 * 模态框控件
 */
@platform.addon("模态框", "模态框", moduleName)
@appClient.template(`<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" name="title">单点定位</h4>
        </div>
        <div class="modal-body">
            <div class="container-fluid" name="body">
            </div>
        </div>
        <div class="modal-footer" name="footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal" name="dialogSubmit">确认</button>
        </div>
    </div>
    <!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>`)
export class dialog extends appClient.baseControl {
    $title?: JQuery = undefined;
    $body?: JQuery = undefined;
    $dialogSubmit?: JQuery = undefined;

    isRemoveBody: boolean = false;

    /**
     * 事件:模态框确认
     */
    onDialogSubmitClick?() {

    }

    /**
     * 事件:模态框绑定后事件
     */
    onControlBind?() {

    }

    show?(title?: string, body?: string) {
        let that = this;
        that.$title.text(title);
        that.$body.html(body);
        that.$dialogSubmit.unbind().click(function () {
            that.onDialogSubmitClick();
        });
        $(that.element).off('hidden.bs.modal').on('hidden.bs.modal', () => {
            if (that.isRemoveBody) {
                that.$body.children().remove();
            }
        });
        if (that.onControlBind) {
            that.onControlBind();
        }
        $(that.element).modal();
    }

    hide?(isRemoveBody?: boolean) {
        let that = this;
        that.isRemoveBody = isRemoveBody;
        $(that.element).modal('hide');
    }
}

/**
 * 自定义缩略图
 */
@platform.addon("自定义缩略图", "自定义缩略图", moduleName)
@appClient.template(
    `<div class="thumbnail">
    <img name="img">
    <div class="caption" name="thumbnailContent">
        <div class="text" style="text-align:center;" name="imgTitle"></div>
    </div>
</div>`)
export class customThumbnail extends appClient.baseControl {
    /**
     * 图片控件
     */
    $img?: JQuery = undefined;
    /**
     * 缩略图描述内容
     */
    $thumbnailContent?: JQuery = undefined;
    /**
     * 图片标题控件
     */
    $imgTitle?: JQuery = undefined;

    /**
     * 图片ID
     */
    id: string;

    /**
     * 图片标题
     */
    imgTitle: string;

    /**
     * 图片源，路径或base64字符串
     */
    imgSrc: string;

    /**
     * 图片点击事件
     */
    onImgClick?= (thumbnail: customThumbnail): void => { };

    onAfterBind?() {
        this.$imgTitle.text(this.imgTitle);
        this.$img.attr('src', this.imgSrc);
        this.$img.click(() => {
            if (this.onImgClick) {
                this.onImgClick(this);
            }
        });
        this.$imgTitle.click(() => {
            if (this.onImgClick) {
                this.onImgClick(this);
            }
        });
    }

}

/**
 * 列控件
 */
@platform.addon("列控件", "列控件", moduleName)
@appClient.template(`<div></div>`)
export class colControl extends appClient.baseControl {
    /**
     * 子控件列表
     */
    children?: appClient.baseControl[];

    /**
     * 此控件跨越的列数
     */
    colNum: number = 12;

    /**
     * 构造方法
     * @param colNum 跨越的列数
     * @param html 视图模板
     * @param css 视图样式文件
     */
    constructor(colNum?: number, html?: string, css?: string) {
        super(html, css);
        this.colNum = colNum;
    }

    onAfterBind?() {
        $(this.element).addClass("col-sm-" + this.colNum);
        if (this.children) {
            for (let child of this.children) {
                child.appendTo(this.element);
            }
        }
    }

    setColNum(num: number) {
        this.colNum = num;
    }

    addChild(child: appClient.baseControl) {
        if (!this.children)
            this.children = [];
        this.children.push(child);
    }


}

/**
 * 行控件
 */
@platform.addon("行控件", "行控件", moduleName)
@appClient.template(`<div class="row"></div>`)
export class rowControl extends appClient.baseControl {

    /**
     * 子控件
     */
    children?: colControl[];

    onAfterBind?() {
        if (this.children) {
            for (let child of this.children) {
                child.appendTo(this.element);
            }
        }
    }

    addChild(child: colControl) {
        if (!this.children)
            this.children = [];
        this.children.push(child);
    }
}

/**
 * 轮播组
 */
@platform.addon("轮播组", "轮播组", moduleName)
@appClient.template(`<div class="container-fluid">
<div class="row-fluid">
    <div id="kamfuCarousel" class="carousel slide" data-pause>
        <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators" name="carouselIndicators">
        </ol>
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner" name="carouselContent">
        </div>
        <!-- 轮播（Carousel）导航 -->
        <a class="left carousel-control" href="#kamfuCarousel" data-slide="prev" name="prevButton">‹</a>
        <a class="right carousel-control" href="#kamfuCarousel" data-slide="next" name="nextButton">›</a>
    </div>
</div>
</div>`)
export class carousel extends appClient.baseControl {
    /**
     * 轮播指标
     */
    $carouselIndicators?: JQuery = undefined;

    /**
     * 轮播内容
     */
    $carouselContent?: JQuery = undefined;

    /**
     * 上一页
     */
    $prevButton?: JQuery = undefined;

    /**
     * 下一页
     */
    $nextButton?: JQuery = undefined;

    /**
     * 每页显示的内容数量
     */
    pageItemNum: number = 4;

    /**
     * 每行显示的列数(不超过12，超过则为12)
     */
    colNum: number = 2;

    /**
     * 子控件
     */
    children?: appClient.baseControl[];

    onAfterBind?() {
        //每行显示的列数超过12则算为12
        if (this.colNum > 12) {
            this.colNum = 12;
        }
        let controls: appClient.baseControl[] = [];
        let itemDiv: appClient.baseControl = undefined;
        let pageContent: appClient.baseControl = undefined;
        let row: rowControl = undefined;

        for (let childNum: number = 0; childNum < this.children.length; childNum++) {
            let child = this.children[childNum];
            let col: colControl = new colControl(Math.floor(12 / this.colNum));
            col.addChild(child);
            //分页
            if (childNum % this.pageItemNum == 0) {
                itemDiv = new appClient.baseControl('<div class="item"></div>');
                itemDiv.appendTo(this.$carouselContent);
                pageContent = new appClient.baseControl(`<div class="container-fluid"></div>`);
                pageContent.appendTo(itemDiv.element);
                if (childNum == 0) {
                    itemDiv.addClass("active");
                }
            }
            //分行
            if (childNum % Math.ceil(this.pageItemNum / this.colNum) == 0) {
                //页内容对象
                row = new rowControl();
                row.appendTo(pageContent.element);
            }
            col.appendTo(row.element);
        }
    }
}


/**
 * 时间控件
 */
@platform.addon("时间控件", "时间控件", moduleName)
@appClient.template(
    `<div class="input-group date form_date">
<span class="input-group-addon" name="title"></span>
<input class="form-control" type="text" name="input" />
<span class="input-group-addon"><em class="glyphicon glyphicon-th"></em></span>
</div>
`)
export class timeEditControl extends baseEditControl {
    /**
     * 标题控件
     */
    $title?: JQuery = undefined;
    /**
     * 时间输入框
     */
    $input?: JQuery = undefined;
    /**
     * 时间控件选择的最精确的视图
     *0：表示分钟 1：表示小时  2：表示日  3：表示月份，4：表示年份
     */
    timeMinView?: number = 3;
    /**
     * 今天是否高亮
     */
    todayHighlight?: boolean = true;
    /**
     * 时间格式
     */
    timeFormat?: string = 'yyyy-mm-dd';
    /**
     * 获取输入的值
     */
    getValue?(): any {
        return this.$input.val();
    }
    /**
     * 绑定后事件
     */
    onAfterBind?() {
        //操作时间控件显示格式
        $(this.element).datetimepicker({
            format: this.timeFormat,
            language: 'zh-CN',
            autoclose: true,
            todayHighlight: this.todayHighlight,
            startView: this.timeMinView,
            minView: this.timeMinView,
            clearBtn: true
        });
        this.$title.text(this.caption);
    }
}

